<template>
  <div id="safeEvents-detail">
    <!-- 一句话总结 -->
    <div class="details-desc" v-if="rawData._source">
      <div v-html="rawData._source.summary"></div>
    </div>
    <div class="details-body">
      <!-- 监测信息 -->
      <div class="details-part">
        <div class="info-title">监测信息</div>
        <div class="info-content dynamic">
          <div :class="{'item': true}">
            <div class="cell--label">日志类型</div>
            <div class="cell">{{translateChinese('stype', handleData.stype, stypeDict)}}</div>
          </div>
          <div :class="{'item': true}">
            <div class="cell--label">发生时间</div>
            <div class="cell">{{handleData.ts}}</div>
          </div>
          <div :class="{'item': true}" v-if="handleData.stype !== 'DEV-STATUS' && handleData.stype !== 'SYS-STATUS'">
            <div class="cell--label">严重级别</div>
            <div class="cell">
              <span v-if="handleData.level !==''"" :class="['level-tag',handleData.level === 0 ?'level-tag-normal':handleData.level === 1 ?'level-tag-low-risk':handleData.level === 2 ?'level-tag-middle-risk':handleData.level === 3 ?'level-tag-high-risk':'level-tag-serious']">
                {{translateChinese('levelStr',handleData.level)}}
              </span>
              <span class="level" v-else>--</span> 
            </div>
          </div>
          <div :class="{'item': true, 'odd': (detailInfo.monitor.length + 3 )%2>0&&rawData._source.type !== 'visible'}" v-for="(item, index) in detailInfo.monitor" :key="index">
            <div class="cell--label">{{item.label}}</div>
            <div class="cell" v-if="item.value !==''">
              <at-tooltip ref="tool" effect="dark" :disabled="(item.value + '').length < 59" :content="item.value + ''" placement="top-start">
                  <span>{{item.value}}</span>
              </at-tooltip>
            </div>
            <div class="cell" v-else></div>
          </div>
        </div>
      </div>
      <!-- 系统信息 -->
      <div class="details-part" v-if="handleData.sysInfoVisible">
        <div class="info-title">系统信息</div>
        <div class="info-content">
          <div class="item" v-for="(item, index) in detailInfo.sysInfo" :key="index">
            <div class="cell--label">{{item.label}}</div>
            <div class="cell">{{item.value}}</div>
          </div>
        </div>
      </div>
      <!-- 节点信息 -->
      <div class="details-part" v-if="handleData.nodeInfoVisible">
        <div class="info-title">系统节点信息</div>
        <div class="info-content">
          <div class="item" v-for="(item, index) in detailInfo.nodeInfo" :key="index">
            <div class="cell--label">{{item.label}}</div>
            <div class="cell">{{item.value}}</div>
          </div>
        </div>
      </div>
      <!-- <div v-if="nodeInfo.length>0" class="manyChildren">
        <div class="details-part">
          <div class="info-title">节点信息</div>
          <div class="info-content">
            <div class="children" v-for="(item, index) in nodeInfo" :key="index">
              <div class="children-title"  v-if="item.sys_node_name">{{item.sys_node_name}}</div>
              <div class="chidren-content">
                  <div class="item" v-if="item.sys_node_name">
                      <div class="cell--label">系统节点名称</div>
                      <div class="cell">{{item.sys_node_name}}</div>
                    </div>
                    <div class="item" v-if="item.confi_lv_id">
                      <div class="cell--label">等保级别</div>
                      <div class="cell">{{item.confi_lv_id}}</div>
                    </div>
                    <div class="item" v-if="item.sys_node_tag">
                      <div class="cell--label">系统节点标签</div>
                      <div class="cell">{{item.sys_node_tag}}</div>
                    </div>
                    <div class="item" v-if="item.url">
                      <div class="cell--label">url地址</div>
                      <div class="cell">{{item.url}}</div>
                    </div>
                    <div class="item" v-if="item.model">
                      <div class="cell--label">型号</div>
                      <div class="cell">{{item.model}}</div>
                    </div>
                    <div class="item" v-if="item.agency_name">
                      <div class="cell--label">所属机构</div>
                      <div class="cell">{{item.agency_name}}</div>
                    </div>
                    <div class="item" v-if="item.sys_name">
                      <div class="cell--label">所属系统</div>
                      <div class="cell">{{item.sys_name}}</div>
                    </div>
                    <div class="item" v-if="item.update_time">
                      <div class="cell--label">最后修改时间</div>
                      <div class="cell">{{item.update_time}}</div>
                    </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      
      <!-- 上报记录 -->
      <div class="details-part">
        <div class="info-title">上报记录</div>
        <div class="info-content">
          <div class="item" v-for="(item, index) in detailInfo.report" :key="index">
            <div class="cell--label">{{item.label}}</div>
            <div class="cell">{{item.value}}</div>
          </div>
        </div>
      </div>
      <!-- 原始json -->
      <div class="json-list-wrap">
        <div class="json-head">
          <div class="json-title">
            原始json
          </div>
          <div class="json-btn">
            <at-button class="btn-download" type="primary" @click="downloadJson(rawData)"><i class="saas-icon-res-down"></i>下载</at-button>
          </div>
        </div>
        <div class="json-list" v-if="rawData !==undefined && rawData !== null && rawData._source !== undefined"">
          <treegrid class="table-tree" :defaultExpandAll="false" :columns="tableColumn" :tree-structure="true" :data-source="tableData(rawData)" :ifStyle='ifStyle' :cusStyle="cusStyle"></treegrid>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getOneStringDes } from '../../../utils/sysMakeString'
  import $http from '../../../utils/http.js'
  import { detailInfoStructure, mixin } from '../../../models/safeEvents/utils/util'
  import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
  import { initDetail } from '../../../models/safeEvents/utils/initDetail'
  export default {
    mixins: [mixin],
    data () {
      return {
        tableColumn: [
          {
            text: 'Key',
            dataIndex: 'label',
            width: '197'
          },
          {
            text: 'Value',
            dataIndex: 'value'
          }
        ],
        // treegrid 灰色样式
        ifStyle: true,
        cusStyle: 'color:#DEDEDE;'
      }
    },
    computed: {
      ...mapState({
        rawData: state => state.safeEvents.rawData,
        handleData: state => state.safeEvents.handleData,
        detailInfo: state => state.safeEvents.detailInfo
      }),
      ...mapGetters('safeEvents', [
        'stypeDict',
        'logType'
      ])
    },
    methods: {
      ...mapActions('safeEvents', [
        'DOWNLOAD_SINGLE_JSONFILE',
        'GET_DETAIL_DATA',
        'GET_STYPE_DICT'
      ]),
      ...mapMutations('safeEvents', [
        'SET_SEARCHINPUT_ES',
        'SET_HANDLEDATA',
        'SET_RAWDATA',
        'SET_DETAIL_INFO'
      ]),
      /**
       * 格式化rawData为treegrid可用格式
       *
       * @param {Any} data  原始数据
       * @param {Array} container 暂存数组
       * @param {Object} count 迭代次数
       */
      formatProps (data, container, count) {
        count.count += 1
        for (let key of Object.keys(data)) {
          let _type = Object.prototype.toString.call(data[key]).slice(8, -1)
          if (_type === 'Object') {
            let fieldsNum = data[key] ? Object.keys(data[key]).length : 0
            container.push({
              label: key,
              value: `{ ${fieldsNum} fields }`,
              children: [],
              type: _type
            })
            this.formatProps(
              data[key],
              container[container.length - 1].children,
              count
            )
          } else if (_type === 'Array') {
            container.push({
              label: key,
              value: `[ ${data[key].length} elements ]`,
              children: [],
              type: _type
            })
            this.formatProps(
              data[key],
              container[container.length - 1].children,
              count
            )
          } else {
            container.push({
              label: key,
              value: data[key],
              type: _type
            })
          }
        }
      },
      // 格式化为JSON数据
      tableData (data) {
        let treeData = []
        let count = { count: 0 }
        let cacheData = JSON.parse(JSON.stringify(data))
        // 删除getter丰富的标题 & 描述信息
        if (cacheData._source.hasOwnProperty('describes')) {
          delete cacheData._source.describes
        }
        if (cacheData._source.hasOwnProperty('summary')) {
          delete cacheData._source.summary
        }
        this.formatProps(cacheData, treeData, count)
        return treeData
      },
      // 下载json数据
      downloadJson (data) {
        let rawData = JSON.parse(JSON.stringify(data))
        // 删除getter丰富的标题 & 描述信息
        delete rawData.describes
        delete rawData.summary
        this.DOWNLOAD_SINGLE_JSONFILE([rawData])
      }
    },
    created () {
      $http.post('/api/search/id', { id: this.$route.params.id }).then(({ status, data, msg }) => {
        if (status === 'success') {
          let raw = data.hits.hits[0]
          let source = raw._source
          // 详情页日志描述
          source.summary = getOneStringDes(raw._source, 'summary')
          // 设置原始数据
          this.SET_RAWDATA(raw)
          // 处理后数据
          this.SET_HANDLEDATA(initDetail(source))
          this.GET_STYPE_DICT()
          // 设置详情页显示内容
          let info = detailInfoStructure({ stype: source.stype, handleData: this.handleData, stypeDict: this.stypeDict })
          this.SET_DETAIL_INFO(info)
        }
      })
    },
    mounted () {
    }
  }
</script>
<style src="./detail.less" lang="less">
</style>